<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" >
      <el-form-item label="查询月份">
        <el-date-picker v-model="queryParams.months" type="month" placeholder="选择日期" value-format="YYYY-MM"
          :disabled-date="disabledDate" @change="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery" v-hasPermi="['system:bills:query']">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据展示表格 -->
    <el-row :gutter="10" class="mb8">
      <!-- 操作行 -->
      <!-- <el-col :span="1.5">
        <el-button type="success" plain icon="Upload" v-if="false" @click="handleUpload">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" v-if="false" @click="handleExport">导出</el-button>
      </el-col> -->
    </el-row>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" :border="true" max-height="500" show-summary>
      <el-table-column label="项目编号" prop="project_no" width="155" align="center"/>
      <el-table-column label="井号（简称）" prop="well_no" width="155" align="center"/>
      <el-table-column label="公司名称" prop="dept_name" width="155" align="center"/>
      <el-table-column label="施工队名称" prop="dept_three_name" width="155" align="center"/>
      <el-table-column label="成本费用明细" align="center">
        <el-table-column :prop="item.id" :label="item.subjectName" width="200" align="center" v-for="(item,index) in tableListB"/>
        <el-table-column prop="-1" label="其他费用" width="200" align="center" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { monthlyList, listSub } from "@/api/cost/monthly";

// 字典引入
const { proxy } = getCurrentInstance();

const tableListB = ref([]);
//部门下拉树

// 表格数据
const tableData = ref([]);
const loading = ref(false);
// 数据总数

// 获取当月
const now = new Date();
const year = ref(now.getFullYear())
const month = ref(now.getMonth() + 1)

const queryParams = ref({
  months: `${year.value}-${month.value.toString().padStart(2, '0')}`,
});

//获取列表数据
const getList = () => {
  loading.value = true;
  monthlyList(queryParams.value)
    .then((res) => {
      tableData.value = res.data;
      loading.value = false;
    })
    .catch((error) => {
      console.log(error);
    });
};

const getColumn = () => {
  listSub({pageSize: 1000}).then(res => {
    tableListB.value = res.rows
  })
}


/**导出按钮操作 */
function handleExport() {
  proxy.download(
    "/system/management/export",
    {
      ...queryParams.value,
    },
    `项目列表.xlsx`
  );
}

//查询列表
const handleQuery = () => {
if(queryParams.value.months===null){
  queryParams.value.months=`${year.value}-${month.value.toString().padStart(2, '0')}`
}
  getList();
};

getList();
getColumn()
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}

.search-form {
  padding-left: 20px;
}

.el-width {
  width: 340px;
}
</style>
